const rowGlobalConfig = {
    data() {
        return {
            html: [{
                label: '<div>块元素(默认)',
                value: 'div'
            }, {
                label: '<span>行内元素',
                value: 'span'
            }, {
                label: '<header>表头行',
                value: 'header'
            }, {
                label: '<footer>表尾行',
                value: 'footer'
            }, {
                label: '<section>用于分割内容的块元素',
                value: 'section'
            }, {
                label: '<article>用于独立的、完整的意义段落',
                value: 'article'
            }, {
                label: '<article>侧边栏内容',
                value: 'aside'
            }],
        }
    }
}
//栅格布局
Vue.component('row', {
    template: `<div :id="id" :class="[layer?'layer':'']" :style="{'border':layerBorder}">
    <el-row :gutter="data.gutter" :type="data.type" :justify="data.justify" :align="data.top" :tag="data.tag"><slot></slot></el-row>
    <i v-show="layer&&SortableSwitch" style="position: absolute;top: 0;left: 0; z-index:999; color:#67C23A;" class="el-icon-rank"></i></div>`,
    mixins: [global],
})
Vue.component('rowItem', {
    template: `<el-col :id="id" :class="[rowMark?'rowMark':'',select?'select':'']" :style="{minHeight}" :span="data.span" :offset="data.offset" :push="data.push" :pull="data.pull" :tag="data.tag"
        :xl="data.xl" :lg="data.lg" :md="data.md" :sm="data.sm" :xs="data.xs"><slot></slot></el-col>`,
    mixins: [global],
    computed: {
        rowMark() {
            return this.$store.state.RowItemMark.some(id => id == this.id)
        },
        select() {
            return this.$store.state.SelectElement == this.id
        }
    }
})
Vue.component('rowConfig', {
    template: `<el-card style="background-color: white;">
    <div class="table_titel">
        <div class="titel">栅格布局</div>
        <div class="operation">
            <el-button size="small" :type="isMark?'danger':''" @click="handleMark">{{isMark?'取消标记':'标记栅格'}}</el-button>
            <el-button :type="isSwitch?'danger':'success'" size="small" @click="handleSort">{{isSwitch?'取消拖拽':'拖拽栅格'}}</el-button>
            <el-button type="primary" size="small" @click="Add">添加栅格</el-button>
            <el-button type="danger" size="small" @click="Remove">移除栅格</el-button>
        </div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="栅格间距">
            <el-input-number v-model="data.gutter" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="标签类型(默认div)">
            <el-select filterable v-model="data.tag" style="width:100%;" placeholder="请选择标签类型">
                <el-option v-for="(item,index) in html" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="3" border size="small">
        <el-descriptions-item label="开启弹性布局">
            <el-switch v-model="data.type" active-value="flex" :inactive-value="false"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="水平排列方式">
            <el-select filterable style="width:170px" :disabled="!data.type" v-model="data.justify" placeholder="请选择标签类型">
                <el-option v-for="(item,index) in justify" :key="index" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="垂直排列方式">
            <el-select filterable style="width:150px" :disabled="!data.type" v-model="data.align" placeholder="请选择标签类型">
                <el-option v-for="(item,index) in align" :key="index" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
    </el-descriptions>
    <el-collapse :id="'config'+id" v-model="activeNames"><slot></slot></el-collapse>
</el-card>`,
    mixins: [globalConfig, rowGlobalConfig, drag],
    props: ['slot'],
    data() {
        return {
            isMark: false,//标记
            justify: [{
                label: '从左往右',
                value: 'start',
            }, {
                label: '从右往左',
                value: 'end',
            }, {
                label: '水平居中',
                value: 'center',
            }, {
                label: '平均分布,两端留白',
                value: 'space-around',
            }, {
                label: '平均分布,两端不留白',
                value: 'space-between',
            }],
            align: [{
                label: '向上对齐',
                value: 'top',
            }, {
                label: '垂直居中',
                value: 'middle',
            }, {
                label: '向下对齐',
                value: 'bottom',
            }],
            activeNames: [],
        }
    },
    computed: {
        RowItemMark() {
            return this.$store.state.RowItemMark
        },
        RowItemSort() {
            return this.$store.state.RowItemSort
        }
    },
    methods: {
        handleMark() {//标记
            this.isMark = !this.isMark
            if (this.isMark) {
                let RowItemMark = this.slot.map(item => item.id);
                this.$store.commit('setRowItemMark', [...this.RowItemMark, ...RowItemMark]);
            } else {
                let RowItemMark = this.RowItemMark.filter(id => !this.slot.some(item => item.id == id));
                this.$store.commit('setRowItemMark', RowItemMark);
            }
        },
        handleSort(){//拖拽
            this.isSwitch = !this.isSwitch
            if (this.isSwitch) {
                let RowItemSort = this.slot.map(item => item.id);
                this.$store.commit('setRowItemSort', [...this.RowItemSort, ...RowItemSort]);
            } else {
                let RowItemSort = this.RowItemSort.filter(id => !this.slot.some(item => item.id == id));
                this.$store.commit('setRowItemSort', RowItemSort);
            }
        },
        Add() {//添加
            let id = createUniqueString();
            this.slot.push({
                title: 'rowItem',//组件名称
                config: 'rowItemConfig',//配置组件名称
                layer: false,//是否顶层，（影响拖拽）
                id,
                data: {
                    minHeight: 100,//最小高度
                    minHeightUnit: 'px',//最小高度单位
                    span: 24,//栅格占据的列数
                    offset: 0,//栅格左侧的间隔格数
                    push: 0,//栅格向右移动格数
                    pull: 0,//栅格向左移动格数
                    xs: false,//<768px 响应式栅格数或者栅格属性对象
                    sm: false,//≥768px 响应式栅格数或者栅格属性对象
                    md: false,//≥992px 响应式栅格数或者栅格属性对象
                    lg: false,//≥1200px 响应式栅格数或者栅格属性对象
                    xl: false,//≥1920px 响应式栅格数或者栅格属性对象
                    tag: 'div'//自定义元素标签
                },
                slot: []
            })
            if (this.isMark) {
                this.$store.commit('setRowItemMark', [...this.RowItemMark, id]);
            }
            if (this.isSwitch) {
                this.$store.commit('setRowItemSort', [...this.RowItemSort, id]);
            }
        },
        Remove() {//移除
            if (this.slot.length > 1) {
                this.slot.pop();
            } else {
                this.$message({
                    message: '不能在删除了',
                    type: 'warning'
                })
            }
        },
    },
    mounted() {
        this.sortable(this, '#config' + this.id + " div", '.el-collapse-item', this.slot);
    }
})
Vue.component('rowItemConfig', {
    template: `<el-collapse-item :name="id">
    <template slot="title">
        <div class="table_titel">
            <i v-show="isSort" class="el-icon-rank" style="position: absolute;top:0;left:0;color:#67C23A;"></i>
            <div class="titel" style="margin-right: 10px;">栅格</div>
            <el-tag :type="SelectElement==id?'danger':'primary'" size="small" @click.stop="handleSelect">{{SelectElement==id?'取消选中':'选中'}}</el-tag>
        </div>
    </template>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="最小高度">
            <el-input-number v-model="data.minHeight" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="最小高度单位">
            <el-select filterable v-model="data.minHeightUnit" placeholder="请选择最小高度单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="栅格占据列数(最大24)">
            <el-input-number v-model="data.span" :min="0" :max="24"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左侧间隔格数">
            <el-input-number v-model="data.offset" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="向右移动格数">
            <el-input-number v-model="data.push" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="向左移动格数">
            <el-input-number v-model="data.pull" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="(≥1920px) 栅格占据列数">
            <div style="text-align: center; line-height: 40px; height:40px; font-size: 16px; font-weight: 700;" v-if="!data.xl">未启用</div>
            <el-input-number v-else v-model="data.xl" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="(≥1920px) 是否启用">
            <el-switch v-model="data.xl" :active-value="24" :inactive-value="false"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="(≥1200px) 栅格占据列数">
            <div style="text-align: center; line-height: 40px; height:40px; font-size: 16px; font-weight: 700;" v-if="!data.lg">未启用</div>
            <el-input-number v-else v-model="data.lg" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="(≥1200px) 是否启用">
            <el-switch v-model="data.lg" :active-value="24" :inactive-value="false"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="(≥992px) 栅格占据列数">
            <div style="text-align: center; line-height: 40px; height:40px; font-size: 16px; font-weight: 700;" v-if="!data.md">未启用</div>
            <el-input-number v-else v-model="data.md" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="(≥992px) 是否启用">
            <el-switch v-model="data.md" :active-value="24" :inactive-value="false"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="(≥768px) 栅格占据列数">
            <div style="text-align: center; line-height: 40px; height:40px; font-size: 16px; font-weight: 700;" v-if="!data.sm">未启用</div>
            <el-input-number v-else v-model="data.sm" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="(≥768px) 是否启用">
            <el-switch v-model="data.sm" :active-value="24" :inactive-value="false"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="(<768px) 栅格占据列数">
            <div style="text-align: center; line-height: 40px; height:40px; font-size: 16px; font-weight: 700;" v-if="!data.xs">未启用</div>
            <el-input-number v-else v-model="data.xs" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="(<768px) 是否启用">
            <el-switch v-model="data.xs" :active-value="24" :inactive-value="false"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="标签类型(默认div)">
            <el-select filterable v-model="data.tag" style="width:100%;" placeholder="请选择标签类型">
                <el-option v-for="(item,index) in html" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
    </el-descriptions>
    <el-card style="background-color: white;"><slot></slot></el-card>
    </el-collapse-item>`,
    mixins: [globalConfig, rowGlobalConfig],
    computed: {
        isSort() {
            return this.$store.state.RowItemSort.some(id => id == this.id)
        }
    },
    methods: {
        handleSelect() {//选中
            if (this.SelectElement != this.id) {
                this.$store.commit('setSelectElement', this.id);
            } else {
                this.$store.commit('setSelectElement', '');
            }
        },
    }
})